<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>敏感数据过滤</title>
		<link href="../../component/pear/css/pear.css" rel="stylesheet">
		<style>
			p {margin: 6px 15px;}
		</style>
	</head>
	<body class="pear-container" >
		<form class="layui-form" lay-filter="filter-form-sites">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body layui-row">
							<div class="layui-col-md6">
								<div class="layui-input-inline">
									<select name="site" id="site" lay-filter="filter-site">
										<option value="0">全局设置</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
		
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">敏感数据过滤设置</div>
					<div class="layui-card-body">
						<div class="layui-row layui-col-space10">
							<div class="layui-col-md12">
								<form class="layui-form" lay-filter="filter-form-sensitive">
									<div class="layui-input-group">
										<div class="layui-input-prefix" style="padding: 9px 10px 9px 0;">状态</div>
										<input type="checkbox" id="id-sensitive-state" name="state" lay-skin="switch" lay-filter="filter-sensitive-module-state" title="ON|OFF" />
										<div class="layui-input-suffix" style="padding: 9px 0px 9px 10px;">开启后将对上游服务器返回的页面中敏感数据进行过滤打码处理（仅网页有效）。</div>
									</div>
								</form>
							</div>
						</div>
						<div class="layui-row layui-col-space10">
							<div class="layui-col-md12">
								<table id="id-table-rules" lay-filter="filter-table-rules"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">敏感词</div>
					<div class="layui-card-body">
						<div class="layui-row layui-col-space10">
							<div class="layui-col-md12">
								<div style="float: left;">将会对上游服务器返回的页面内容中包含的敏感词打码处理。</div>
								<div style="float: right;"><button class="pear-btn pear-btn-primary pear-btn-xs" lay-on="editWords"><i class="layui-icon layui-icon-edit"></i></button></div>
							</div>
						</div>
						<div class="layui-row layui-col-space10">
							<div class="layui-col-md12">
								<div class="layui-form-text">
									<textarea id="id-senstiveWords" name="senstiveWords" placeholder="要过滤的敏感词，每行一个。" style="height: 150px;" class="layui-textarea" readonly></textarea>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<form class="layui-form" style="background-color:#fff;padding: 10px 15px;display: none;" lay-filter="filter-form-rule" id="id-form-rule">
			<input type="hidden" name="id" />
			<input type="hidden" name="state" />
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">匹配正则</div>
			</div>

			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<input type="text" name="rule" lay-verify="required" autocomplete="off" class="layui-input" />
				</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">打码范围</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<input type="text" name="codingRange" lay-verify="required|codingRange" autocomplete="off" class="layui-input" />
				</div>
			</div>
			<div class="layui-row layui-col-space10 layui-bg-gray">
				<div class="layui-col-md12 layui-col-sm12">
					<p>打码范围是匹配到的字符串中要处理的子字符串范围，有两种形式：</p>
					<p>1. 直接标明要处理的子字符串的起始位置：</p>
					<p><div style="padding-left: 30px;">1. 如“4,7”，则会将对从第4个位置开始到第7个位置之间的所有字符进行处理。</div></p>
					<p><div style="padding-left: 30px;">2. 起止位置也可以是一个负数，如“4,-5”`，则会将对从第4个位置开始到倒数第5个位置之间的所有字符进行处理。</div></p>
					<p>2. 使用`$`字面量加数字，比如：`$0`指的是由该模式匹配的整个子串，而`$1`指第一个带括号的捕获子串。</p>
				</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">备注</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<div class="layui-form-text">
						<textarea name="description" placeholder="请输入备注" lay-filter="rule_textarea" class="layui-textarea" style="min-height: 60px;"></textarea>
					</div>
				</div>
			</div>

			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<div style="float: right;">
						<button type="submit" class="pear-btn pear-btn-primary" lay-submit lay-filter="filter-rule-save">保存</button>
						<button type="button" class="pear-btn" lay-on="ruleCancel">取消</button>
					</div>
				</div>
			</div>
		</form>

		<form class="layui-form" style="background-color:#fff;padding: 10px 15px;display: none;" lay-filter="filter-words" id="id-words">
			<input type="hidden" name="id" />
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">敏感词列表</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<div class="layui-form-text">
						<textarea name="content" placeholder="敏感词，每行一个。" style="height: 210px;" class="layui-textarea"></textarea>
					</div>
				</div>
			</div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<div style="float: right;">
						<button type="submit" class="pear-btn pear-btn-primary" lay-submit lay-filter="filter-words-save">保存</button>
						<button type="button" class="pear-btn" lay-on="ruleCancel">取消</button>
					</div>
				</div>
			</div>
		</form>

		<script type="text/html" id="id-template-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
		</script>
		<script type="text/html" id="id-template-bar">
			<button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		</script>
		<script type="text/html" id="id-template-rule-state">
			<input type="checkbox" name="state" value="{{= d.id }}" lay-skin="switch" lay-filter="filter-rule-state" title="ON|OFF" {{= d.state == "on" ? "checked" : "" }} />
		</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../js/action.js"></script>

		<script>
			layui.use(['form','table','util','jquery','popup'], function() {
				var table = layui.table;
				var form = layui.form;
				var util = layui.util;
				var popup = layui.popup;
				var layer = layui.layer;
				var $ = layui.$;

				// 切换域名
				form.on('select(filter-site)', function(data) {
					getSiteConfig();
					reloadTableData();
				});

				function getSiteConfig() {
					$.get('/sensitive/config/get', {siteId : $('#site').val()}, function(res) {
						if (res && res.data) {
							var sensitive = JSON.parse(res.data);
							var sensitiveDataFilter = sensitive.sensitiveDataFilter;
							var senstiveWords = sensitive.senstiveWords;

							$('#id-sensitive-state').prop('checked', sensitiveDataFilter.state == 'on' ? true : false);
							$('#id-senstiveWords').val(senstiveWords);

							form.render(null, 'filter-form-sensitive');
						}
					}, "json");
				}

				$(function() {
					$.get('/sites/list', {}, function(data) {
						if (data && data.data) {
							$.each(data.data, function(key, site) {
								var serverName = site.serverNames.join(',');
								$('#site').append('<option value="' + site.id + '">' + serverName + '</option>');
							});

							form.render(null, 'filter-form-sites');
							getSiteConfig();
							reloadTableData();
						}
					}, "json");

					// 阻止回车触发表单提交
					$('input').on('keydown', function (e) {
						if (e.keyCode === 13) {
							e.preventDefault();
							return false;
						}
					});
				});

				table.render({
					elem: '#id-table-rules',
					cols: [[ //标题栏
						{field: 'state', title: '状态', templet: '#id-template-rule-state', width: 100},
						{field: 'action', title: '响应动作', templet: function(d) {
							return '<div>' + getActionText(d.action) + '</div>';
						}},
						{field: 'description', title: '备注', minWidth: 200},
						{fixed: 'right', title:'操作', width: 80, minWidth: 80, toolbar: '#id-template-bar'}
					]],
					toolbar: '#id-template-toolbar',
					css:'.layui-form{margin-top:0px;}',
					page: true, // 是否显示分页
					limits: [5, 10, 15, 20, 25, 30],
					limit: 10
				});

				function reloadTableData() {
					table.reloadData('id-table-rules', {
						url: '/sensitive/rule/list',
						page: {
							curr: 1
						},
						where: {
							siteId: $('#site').val()
						}
					});
				}

				function openLayer(title) {
					layer.open({
						type: 1,
						title: title,
						area: ['600px', 'auto'],
						shade: 0.6,
						shadeClose: true,
						content: $('#id-form-rule'),
						end: function() {
							$("#id-form-rule").trigger("reset");
							$("#id-form-rule").find("input[type='hidden']").val("");
						}
					});
				}

				// 触发单元格工具事件
				table.on('tool(filter-table-rules)', function(obj) {
					var data = obj.data; // 获得当前行数据
					if(obj.event === 'edit') {
						openLayer('编辑规则');
						form.val('filter-form-rule', data);
					}
				});

				table.on('toolbar(filter-table-rules)', function(obj) {
					if (obj.event === 'add') {
						openLayer('添加规则');
					}
				});

				util.on('lay-on', {
					editWords: function() {
						var param = {siteId : $('#site').val()};
						$.get('/sensitive/words/get', param, function(res) {
							if (res && res.code == 200) {
								layer.open({
									type: 1,
									title: '编辑敏感词',
									shade: 0.6,
									shadeClose: true,
									area: ['430px', '360px'],
									content: $('#id-words'),
									end: function() {
										$("#id-words").trigger("reset");
									}
								});

								form.val('filter-words', res.data);
							} else {
								popup.failure(res.msg);
								return false;
							}
						}, "json");
					},
					ruleCancel: function() {
						layer.closeLast('page');
					}
				});

				form.verify({
					codingRange: function(value, elem) {
						var regex = /^-?[1-9]\d*,-?[1-9]\d*$|^\$(?:0|[1-9]+\d*)$/
						if (regex.test(value) == false) {
							return "打码范围格式不正确";
						}
					}
				});

				// 提交事件
				form.on('submit(filter-rule-save)', function(data) {
					var field = data.field;
					var param = {siteId : $('#site').val()};
					param.rule = JSON.stringify(field);
					$.post('/sensitive/rule/save',  param, function(data) {
						if (data && data.code == 200) {
							table.reloadData('id-table-rules');
							layer.closeLast('page');
							popup.success("已保存");
							return true;
						} else {
							popup.failure(data.msg);
							return false;
						}
					}, "json");

					return false;
				});

				form.on('switch(filter-rule-state)', function(obj) {
					var param = {siteId : $('#site').val()};
					param.ruleId = this.value;
					param.state = this.checked ? 'on' : 'off';
					$.post('/sensitive/rule/state/update',  param, function(data) {
						if (data && data.code == 200) {
							table.reloadData('id-table-rules');
							return true;
						} else {
							popup.failure(data.msg);
							return false;
						}
					}, "json");
				});

				form.on('switch(filter-sensitive-module-state)', function(obj) {
					var state = this.checked ? 'on' : 'off';
					var param = {siteId: $('#site').val(), state : state}
					$.post('/sensitive/config/state/update', param, function(data) {
						if (data && data.code == 200) {
							return true;
						} else {
							popup.failure(data.msg);
							return false;
						}
					}, "json");
				});

				// 提交事件
				form.on('submit(filter-words-save)', function(data) {
					var field = data.field; // 获取表单字段值
					var content = field.content;
					var param = {siteId : $('#site').val()};
					param.content = content;
					$.post('/sensitive/words/update',  param, function(data) {
						if (data && data.code == 200) {
							layer.closeLast('page');
							popup.success("已保存");
							$('#id-senstiveWords').val(content);
							return true;
						} else {
							popup.failure(data.msg);
							return false;
						}
					}, "json");

					return false;
				});
			});
		</script>
	</body>
</html>
